<template>
	<!-- 
		插槽content：放内容的
			title: 标题
		需要传入的值或回调
			statePay:显示与隐藏弹出层的控制器
			closePaySuccess:关闭此弹出层的回调事件
	 -->
	<!-- 支付成功(后期替换，使得其更好维护) -->
	<van-popup class="payPop" :show="props.statePay" :closeable="props.closeableStatus" round position="bottom"
		:style="{ height: '80%',backgroundColor:'#222324' }" @click-overlay="overlayPopup">
		<slot name="title"></slot>
		<image class="successPic" src="/static/images/Shop/success.png" mode=""></image>
		<view class="SuccessMsg">
			<slot name="content"></slot>
		</view>
	</van-popup>
</template>

<script setup lang="ts">
	import { defineEmits } from 'vue'
	import { useStore } from 'vuex'
	const store = useStore()
	const emit = defineEmits(['closePaySuccess'])
	const props = defineProps({
		statePay: Boolean,
		closeableStatus: Boolean
	})
	// 关闭弹出层
	const overlayPopup = () => {
		store.commit('EditShowBottom', false) // 关闭订单确认
		emit('closePaySuccess', { PopupState: false, PopupName: 'statePay' })
	}
</script>

<style lang="scss" scoped>
	::v-deep .van-icon {
		background: none !important;
	}

	::v-deep .van-button {
		width: 216px !important;
		height: 72px;
		border-radius: 10px;
	}

	.payPop {
		--van-popup-close-icon-size: 32px;
		--van-popup-close-icon-color: #fff
	}

	.successPic {
		position: relative;
		top: 10%;
		left: 50%;
		width: 201px;
		height: 178px;
		transform: translateX(-50%);
	}

	.SuccessMsg {
		width: 93%;
		margin: 200px auto;
		text-align: center;
	}
</style>